<template>
  <!-- 注册弹窗容器 -->
  <div class="register-dialog">
    <!-- 遮罩层，点击可关闭弹窗 -->
    <div class="dialog-mask" @click="$emit('close')"></div>

    <!-- 弹窗内容区域 -->
    <div class="dialog-content">
      <!-- 弹窗头部 -->
      <div class="dialog-header">
        <h3>注册新账号</h3>
        <!-- 关闭按钮 -->
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>

      <!-- 手机号输入框 -->
      <div class="form-item">
        <input
            v-model="phone"
            type="tel"
            placeholder="请输入手机号"
            maxlength="11"
            @input="validatePhone"
        >
      </div>

      <!-- 验证码输入框 -->
      <div class="form-item">
        <input
            v-model="smsCode"
            type="text"
            placeholder="请输入验证码"
            maxlength="6"
            :disabled="!smsVerified"
        >
        <!-- 获取验证码按钮 -->
        <button
            class="sms-btn"
            :disabled="!canGetSmsCode || smsCountdown > 0"
            @click="triggerSmsCaptcha"
        >
          {{ smsCountdown > 0 ? `${smsCountdown}s后重试` : '获取验证码' }}
        </button>
      </div>

      <!-- 密码输入框 -->
      <div class="form-item">
        <input
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请设置密码（6-20位字符）"
        >
      </div>

      <!-- 确认密码输入框 -->
      <div class="form-item">
        <input
            v-model="confirmPassword"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请确认密码"
        >
      </div>

      <!-- 注册按钮 -->
      <button
          class="register-btn"
          :disabled="!canRegister"
          @click="handleRegister"
      >
        注册
      </button>
    </div>
  </div>

  <!-- 滑动验证码组件（动态渲染） -->
  <AliyunCaptcha
      v-if="showCaptcha"
      ref="smsCaptcha"
      :app-id="captchaAppId"
      @success="onCaptchaSuccess"
      @fail="onCaptchaFail"
  />
</template>

<script setup lang="ts">
// 导入Vue组合式API
import {ref, computed, nextTick, getCurrentInstance} from 'vue'
// 导入Toast提示组件
import {showToast} from 'vant'
// 导入验证码组件（保持与之前相同的路径）
import AliyunCaptcha from "@/components/LoginComponents/SlideCaptcha.vue"
import {useRouter} from "vue-router";

const emit = defineEmits(['close'])

const global = getCurrentInstance().appContext.config.globalProperties;

// ========== 响应式状态定义 ==========
// 手机号
const phone = ref('')
// 短信验证码
const smsCode = ref('')
// 密码
const password = ref('')
// 确认密码
const confirmPassword = ref('')
// 是否显示密码明文
const showPassword = ref(false)
// 短信验证码倒计时
const smsCountdown = ref(0)
// 是否显示验证码组件
const showCaptcha = ref(false)
// 短信验证是否通过
const smsVerified = ref(false)
// 验证码组件实例引用
const smsCaptcha = ref<InstanceType<typeof AliyunCaptcha>>()
// 验证码应用ID
const captchaAppId = "190060839"
const router = useRouter()
// ========== 计算属性 ==========
// 验证手机号格式（只保留数字）
const validatePhone = () => {
  phone.value = phone.value.replace(/[^\d]/g, '')
}

// 检查手机号是否有效
const isPhoneValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(phone.value)
})

// 是否可以获取短信验证码
const canGetSmsCode = computed(() => {
  return isPhoneValid.value && smsCountdown.value === 0
})

// 是否可以注册
const canRegister = computed(() => {
  return (
      isPhoneValid.value &&
      smsCode.value.length === 6 &&
      password.value.length >= 6 &&
      password.value === confirmPassword.value
  )
})

// ========== 方法定义 ==========
// 触发短信验证码验证流程
const triggerSmsCaptcha = async () => {
  // 检查是否满足获取验证码条件
  if (!canGetSmsCode.value) return

  try {
    // 重置验证状态
    smsVerified.value = false
    smsCode.value = ""

    // 显示验证码组件
    showCaptcha.value = true
    // 等待DOM更新完成
    await nextTick()

    // 调用验证码组件的显示方法
    await smsCaptcha.value?.showCaptcha()

  } catch (error) {
    console.error('验证码显示失败:', error)
    showCaptcha.value = false
  }
}

// 验证码验证成功回调
const onCaptchaSuccess = (data: { ticket: string, randstr: string }) => {
  // 隐藏验证码组件
  showCaptcha.value = false
  // 标记验证通过
  smsVerified.value = true

  // 这里可以存储验证票据（如果需要后端验证）
  const {ticket, randstr} = data

  // 实际发送短信验证码
  sendSmsCode()
}

// 验证码验证失败回调
const onCaptchaFail = (error: { code: number, message: string }) => {
  // 隐藏验证码组件
  showCaptcha.value = false
  // 显示错误提示
  showToast(`验证失败: ${error.message}`)
}

// 实际发送短信验证码的逻辑
const sendSmsCode = async () => {
  // 开始倒计时
  smsCountdown.value = 60
  const timer = setInterval(() => {
    smsCountdown.value--
    if (smsCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  // 显示发送成功提示
  showToast('验证码已发送')

  const resp = await global.$http.get('/SmsSend', {
    params: {
      mobile: phone.value
    }
  });

  console.log(resp);
}

// 注册提交处理
const handleRegister = async () => {
  // 显示注册中提示
  showToast('注册中...')

  try {
    const resp = await global.$http.get('/SmsVerify', {
      params: {
        mobile: phone.value,
        code: smsCode.value
      }
    });

    console.log(resp);

    if (resp.data.success) {
      const resp2 = await global.$http.post('/User/Register', {
        phone: phone.value,
        password: password.value
      });

      console.log(resp2);
      console.log(resp2.data);

      if (resp2.data.code === 0) {
        // 关键修复点：确保只提取纯Token（移除Bearer前缀和所有空格）
        const rawToken = resp2.headers.authorization.replace(/^Bearer\s*/i, '').trim();

        localStorage.setItem('Authorization', rawToken);
        localStorage.setItem('userId', resp2.data.user.id);

        console.log(localStorage);

        router.go(-1);
      } else {
        console.log(resp2.data.msg)
        showToast(resp2.data.msg);
      }
    }
  } catch (error) {
    console.error('注册失败:', error);
  }
}
</script>

<style scoped>
/* 注册弹窗容器样式 */
.register-dialog {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  z-index: 1000; /* 确保在最上层 */
}

/* 遮罩层样式 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

/* 弹窗内容区域样式 */
.dialog-content {
  position: relative; /* 相对定位 */
  width: 90%; /* 宽度90% */
  max-width: 300px; /* 最大宽度300px */
  background-color: white; /* 白色背景 */
  border-radius: 8px; /* 圆角 */
  padding: 20px; /* 内边距 */
  z-index: 1001; /* 在遮罩层之上 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 弹窗头部样式 */
.dialog-header {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 底部外边距 */
}

/* 标题样式 */
.dialog-header h3 {
  margin: 0; /* 去除默认外边距 */
  font-size: 18px; /* 字体大小 */
  color: #333; /* 文字颜色 */
}

/* 关闭按钮样式 */
.close-btn {
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  font-size: 24px; /* 字体大小 */
  cursor: pointer; /* 手型光标 */
  color: #999; /* 文字颜色 */
  padding: 5px; /* 内边距 */
}

/* 关闭按钮悬停效果 */
.close-btn:hover {
  color: #666; /* 颜色变深 */
}

/* 表单项目样式 */
.form-item {
  position: relative; /* 相对定位 */
  margin-bottom: 15px; /* 底部外边距 */
}

/* 输入框样式 */
.form-item input {
  width: 100%; /* 宽度100% */
  padding: 12px 15px; /* 内边距 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字体大小 */
  box-sizing: border-box; /* 盒模型计算方式 */
}

/* 禁用状态输入框样式 */
.form-item input:disabled {
  background-color: #f5f5f5; /* 浅灰色背景 */
  color: #999; /* 灰色文字 */
  cursor: not-allowed; /* 禁用光标 */
}

/* 密码显示/隐藏切换按钮样式 */
.toggle-password {
  position: absolute; /* 绝对定位 */
  right: 10px; /* 距离右侧10px */
  top: 50%; /* 顶部50% */
  transform: translateY(-50%); /* Y轴居中 */
  color: #999; /* 文字颜色 */
  font-size: 12px; /* 字体大小 */
  cursor: pointer; /* 手型光标 */
  user-select: none; /* 禁止文本选择 */
}

/* 获取验证码按钮样式 */
.sms-btn {
  position: absolute; /* 绝对定位 */
  right: 5px; /* 距离右侧5px */
  top: 50%; /* 顶部50% */
  transform: translateY(-50%); /* Y轴居中 */
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  color: #ff5f16; /* 主题色 */
  font-size: 12px; /* 字体大小 */
  cursor: pointer; /* 手型光标 */
  padding: 5px 8px; /* 内边距 */
}

/* 获取验证码按钮禁用状态 */
.sms-btn:disabled {
  color: #999; /* 灰色文字 */
  cursor: not-allowed; /* 禁用光标 */
}

/* 注册按钮样式 */
.register-btn {
  width: 100%; /* 宽度100% */
  padding: 12px; /* 内边距 */
  background-color: #ff5f16; /* 主题色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  margin-top: 20px; /* 顶部外边距 */
  cursor: pointer; /* 手型光标 */
  transition: background-color 0.3s; /* 过渡效果 */
}

/* 注册按钮悬停效果 */
.register-btn:not(:disabled):hover {
  background-color: #e04b0d; /* 颜色加深 */
}

/* 注册按钮禁用状态 */
.register-btn:disabled {
  background-color: #ffb08f; /* 浅色背景 */
  cursor: not-allowed; /* 禁用光标 */
}
</style>